<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://github.com/mineadmin
-->
<script setup lang="tsx">
import WorkbenchLogin from '@/modules/base/views/dashboard/components/workbench/workbench-login.vue'

defineOptions({ name: 'welcome' })
const userinfo = useUserStore().getUserInfo()
</script>

<template>
  <div class="mine-layout">
    <div class="flex justify-between bg-white p-3 dark-bg-dark-8">
      <div class="flex gap-x-5">
        <el-avatar :src="userinfo?.avatar" :size="80">
          <span v-if="!userinfo?.avatar" class="text-5xl">{{ userinfo.username[0].toUpperCase() }}</span>
        </el-avatar>
        <div class="flex flex-col justify-center gap-y-2">
          <span class="text-xl">欢迎使用AI预警管理平台，让工地更安全！</span>
          <span class="text-sm text-dark-1 dark-text-gray-3">建筑工地AI预警管理系统 - 智能守护工地安全</span>
        </div>
      </div>
    </div>

    <div class="justify-between lg:flex">
      <div class="mine-card w-auto lg:w-8/12">
        <div class="text-base">
          <div>AI预警管理解决方案</div>
        </div>
        <div class="grid grid-cols-1 mt-3 lg:grid-cols-3">
          <div class="run-list">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:user" :size="30" />
              <div>
                人员安全预警
              </div>
            </div>
            <div class="desc">
              实时监控工地人员位置和行为，智能识别违规操作、危险区域闯入等情况，及时发出安全预警。
            </div>
          </div>
          
          <div class="run-list !b-r-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:setting" :size="30" />
              <div>
                设备监控预警
              </div>
            </div>
            <div class="desc">
              智能监控工程机械设备运行状态，预警设备故障、超负荷运行等异常情况，保障施工安全。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:camera-filled" :size="30" />
              <div>
                AI视频监控
              </div>
            </div>
            <div class="desc">
              采用AI视频分析技术，实现工地全方位监控、异常行为识别、安全隐患预警等功能。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:warning" :size="30" />
              <div>
                智能预警系统
              </div>
            </div>
            <div class="desc">
              基于大数据分析和AI算法，提供多维度安全预警、风险评估、应急响应等智能化管理功能。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:office-building" :size="30" />
              <div>
                项目工区管理
              </div>
            </div>
            <div class="desc">
              支持多项目、多工区、多工点的层级化管理，实现精细化的施工现场管理和资源配置。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:data-board" :size="30" />
              <div>
                数据分析中心
              </div>
            </div>
            <div class="desc">
              提供安全数据统计、趋势分析、风险评估报告等功能，为管理决策提供科学依据。
            </div>
          </div>
          
        </div>
      </div>
      <div class="mine-card w-auto !ml-3 lg:w-4/12 !lg:ml-0">
        <div class="text-base">
          <div>AI预警管理平台介绍</div>
        </div>
        <div class="mt-3 p-2 text-sm leading-6">
          AI预警管理平台致力于打造现代化、智能化的建筑工地安全管理系统，通过AI技术和大数据分析提升工地安全管理水平。
          我们的目标是：<el-text type="primary">
            用AI技术守护工地安全，让每个建筑工人都能安全回家。
          </el-text>
        </div>
        <div class="p-2 text-sm text-gray-5 dark-text-[#ccc]">
          <ul class="ma-link">
            <li>
              平台特点：
              <el-text type="success">AI驱动的智能预警系统</el-text>
            </li>
            <li>
              核心优势：
              <el-text type="success">实时监控与预防管理</el-text>
            </li>
            <li>
              服务对象：
              <el-text type="success">建筑工地管理者和工人</el-text>
            </li>
            <li>
              技术支持：
              <el-text type="success">7x24小时安全保障</el-text>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <workbench-login />
  </div>
</template>

<style lang="scss" scoped>
.run-list {
  @apply b-1 b-solid b-gray-1 dark-b-dark-3 p-3 b-l-0 b-t-0 b-r-0 lg:b-r-1
  transition-all duration-300
  hover-shadow dark-hover-shadow-dark-3
  ;

  .desc {
    @apply mt-3 text-sm leading-6 dark-text-[#888] text-gray-5
  }
}

.ma-link li {
  @apply flex items-center py-1.5;
}
</style>
